<script lang="ts" setup>
import { download, formatEnum, get, loadFile, message, post } from '@/utils'
import useTable from '@/hooks/useTable'
import useValueEnum from '@/hooks/useValueEnum'
import { Tag, Space } from '@arco-design/web-vue'
const props = defineProps<{
  show: boolean
  grandpaId: string
  parentId: string
}>()
const emit = defineEmits(['update:show', 'reset', 'confirm'])
const { formatColumns } = useTable()
const searchQuery = reactive({
  grandpaId: props.grandpaId,
  parentId: props.parentId,
  userId: '',
})
const formRef = ref()
const actionRef = ref()
const pagination = {
  showPageSize: true,
  pageSize: 20,
}

const request = (params: any, sort: any, filters: any): Promise<any> => {
  return new Promise((resolve, reject) => {
    const query = { ...params, size: params.pageSize }
    Reflect.deleteProperty(query, 'pageSize')
    get(
      {
        url: '/server-shop/admin/place/page',
        data: query,
      },
      ({ data, code }) => {
        resolve({
          data: data.records,
          total: data.total,
          success: code == 200,
        })
      }
    )
  })
}

const columns = formatColumns([
  {
    title: '用户信息',
    dataIndex: 'userInfo',
    fixed: 'left',
  },
  {
    title: '查找用户',
    dataIndex: 'userId1',
    hideInTable: true,
    hideInSearch: false,
    formSlotName: 'userId',
  },
  {
    title: '归属上级',
    dataIndex: 'parent',
    children: [
      {
        title: '上级ID',
        dataIndex: 'parentId',
        width: 150,
        hideInSearch: false,
      },
      {
        title: '上级头像',
        dataIndex: 'parentAvatar',
        width: 100,
        valueType: 'image',
      },
      {
        title: '上级名称',
        dataIndex: 'parentNickName',
        width: 150,
        hideInSearch: false,
      },
      {
        title: '上级电话',
        dataIndex: 'parentMobile',
        width: 150,
        hideInSearch: false,
      },
    ],
  },
  {
    title: '直接推荐',
    dataIndex: 'directCount',
    width: 120,
    sorter: true,
  },
  {
    title: '间接推荐',
    dataIndex: 'indirectCount',
    width: 120,
    sorter: true,
  },
])
</script>

<template>
  <div class="page">
    <CModal v-model:visible="$props.show" :footer="false" :title="$props.parentId ? '直接推荐' : '间接推荐'" width="1000px" @cancel="emit('update:show', false)">
      <ProTable :columns="columns" :request="request" row-key="id" :form-ref="ref => (formRef = ref)" :pagination="pagination" header-title="" column-resizable :scroll="{ x: 1000 }" :params="searchQuery" :bordered="{ cell: true }" :action-ref="ref => (actionRef = ref)">
        <template #option-render="{ dom, reset }">
          <component :is="dom[1]" />
          <component :is="dom[0]" />
        </template>
        <template #userId>
          <AllowSearch v-model:val="searchQuery.userId" api="/server-user/admin/user/page" search-key="nickName" :fieldNames="{ label: 'nickName', value: 'id' }" />
        </template>
        <template #userInfo="{ record }">
          <a-space>
            <a-image width="40" :src="record.userAvatar" />
            <div>
              <p>{{ record.userNickName }}</p>
              <p>{{ record.userMobile }}</p>
            </div>
          </a-space>
        </template>
        <template #parent="{ record }">
          <a-space v-if="record.parentNickName">
            <a-image width="40" :src="record.parentAvatar" />
            <div>
              <p>{{ record.parentNickName }}</p>
              <p>{{ record.parentMobile }}</p>
            </div>
          </a-space>
          <span v-else>-</span>
        </template>
        <!-- <template #directCount="{ record }">
        <a-button type="text">{{ record.directCount }}</a-button>
      </template>
      <template #indirectCount="{ record }">
        <a-button type="text">{{ record.indirectCount }}</a-button>
      </template> -->
      </ProTable>
    </CModal>
  </div>
</template>
